import React, { Component } from "react";
import ReactDom from "react-dom";
import "./index.css"

/* 类组件 可写交互 有自己的生命周期 */
// const oDiv = <div>
//   <ul>
//     <li>1</li>
//     <li>2</li>
//     <li>3</li>
//     <li>3</li>
//   </ul>
//   我是内容
// </div>

/* 函数式组件 */
function App() {
  return <div>
    我是内容
    <Com />
    <Warp/>
    </div>
}

 
function Com() {
  return <div>
    我是组件
  </div>
}

class Warp extends Component{
  // 定义组件中内部状态
  constructor() {
    super()
    this.state = {
      count: 100,
      num: 2,
      classes: "active",
      flag: true,
      obj:{
        name:"王五"
      },
      arr: [1, 2, 3, 4],
      list: [111, 222, 333, [444, 555]],
      list2: [
        {
            name: "张三"
        },
        {
            name: "李斯特"
        }
    ]
      // block: 'block',
      // none:'none',
    }
  }
  // 渲染视图
  render() {
    //解构赋值拿到 数据
    const {
      count,
      num,
      classes,
      flag,
      obj,
      arr,
      list,
      list2
      // block,
      // none
    } = this.state 
    const span = <span>
      {flag ? "未付款" : "已支付" }
    </span>
    return <div>
      类组件 --{count, num}
      
      <p>
        v-show: <span className={flag ? "block":"none"}>通过判断写class</span>
        </p>
      <p>
        v-if:商品状态：{span}
      </p>
      {/* 布尔值 null undefined 显示不出来 */}
      <p>
        {/* 对象不能作为react 的子元素  */}
        对象：{obj.name}
      </p>
      <p>
        v-else:
      </p>
      
      <p>
        v-bind:<span className={classes}>加类名</span>
      </p>

      <p>
        数组：{ arr  } 直接展开了
      </p>
      <p>
        列表： {list} 数组套数组 直接展开了
        
      </p>
      <br />
      <p>
        v-for: {
          list2.map(item => {
            return <li>
              {item.name}
            </li>
          })
         }
      </p>
    </div>
  }
}
ReactDom.render(<App/>, document.getElementById("root"), () => {
  console.log('渲染完成');
})